<div class="content">
    <div id="example_title">
        <h1>Custom Styles</h1>
        Auto-generate forms can be styled.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px;">

</div>

<!--CODE-->
<script type="module">
import { w2form, w2ui, w2popup, w2alert } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    url: 'server/post',
    fields: [
        { field: 'address1', type: 'text',
            html: {
                group: 'Group with styles',
                groupTitleStyle: 'color: orange',
                groupStyle: 'border: 1px solid green; background-color: #eaffea',
                span: 4,
                label: 'Address',
                attr: 'placeholder="line 1" style="width: 285px"'

            }
        },
        { field: 'address2', type: 'text',
            html: {
                span: 4,
                label: '',
                attr: 'placeholder="line 2" style="width: 285px"'

            }
        },
        { field: 'city', type: 'text',
            html: {
                label: 'City',
                span: 4
            }
        },
        { field: 'state', type: 'text',
            html: {
                label: 'State',
                span: 4
            }
        },
        { field: 'zip', type: 'text',
            html: {
                label: 'Zip',
                span: 4
            }
        },
        { field: 'field1', type: 'textarea',
            html: {
                group: 'Fields with Label Above input',
                span: -1,
                text: '',
                label: 'Field 1',
                attr: 'style="width: 100%"'

            }
        },
        { field: 'field1a', type: 'textarea',
            html: {
                span: -1,
                text: '',
                label: 'Field 2',
                attr: 'style="width: 100%"'

            }
        },
        { field: 'field2', type: 'text',
            html: {
                group: 'Different Label widths',
                span: 0,
                text: '',
                label: 'Field 2',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 0"'

            }
        },
        { field: 'field3', type: 'text',
            html: {
                span: 1,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 1"'

            }
        },
        { field: 'field4', type: 'text',
            html: {
                span: 2,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 2"'

            }
        },
        { field: 'field5', type: 'text',
            html: {
                span: 3,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 3"'

            }
        },
        { field: 'field6', type: 'text',
            html: {
                span: 4,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 4"'

            }
        },
        { field: 'field7', type: 'text',
            html: {
                span: 5,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 5"'

            }
        },
        { field: 'field8', type: 'text',
            html: {
                span: 6,
                text: '',
                label: 'Field Name',
                attr: 'style="width: calc(100% - 50px)" placeholder="span: 6"'

            }
        },
    ],
    actions: {
        Reset() {
            this.clear()
        },
        Save() {
            if (form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        },
        custom: {
            text: '<span style="font-size: 16px">←</span> click to see data',
            class: 'custom-class',
            style: 'background-image: none; background-color: transparent; border: 0px; margin: 0 0 0 -10px;',
            onClick() {
                w2alert('Not me!! The other button')
            }
        }
    }
})
</script>
